<template>
  <navigator :url="`/pages/article/article?id=${item.id}`" class="item u-border-bottom" hover-class="none">
    <view class="info">
      <view class="title u-line-2">{{ item.post_title }}</view>
      <view class="other">
        <text>{{ item.published_time }}</text>
        <text v-if="item.post_hits > 0">{{ item.post_hits }}阅读</text>
      </view>
    </view>
    <view class="photo" v-if="item.thumbnail"><image :src="item.thumbnail" mode="aspectFill"></image></view>
  </navigator>
</template>

<script>
export default {
  props: {
    item: Object,
    showBottom: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  padding: 20rpx;
  margin: 10rpx 10rpx 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #ffffff;
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 34rpx;
    }
    .other {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #969696;
      margin-top: 20rpx;
    }
  }
  .photo {
    margin-left: 40rpx;
    image {
      height: 170rpx;
      width: 222rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
